<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html class="x-admin-sm">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	request.setAttribute("basePath", basePath);
%>
<head>
<meta charset="UTF-8">
<title>入库管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/font.css">
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/css/xadmin.css">
<script type="text/javascript"
	src="<%=request.getContextPath()%>/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/xadmin.js"></script>
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">出入库管理</a> <a> <cite>入库管理</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			onclick="location.reload()" title="刷新"> <i
			class="layui-icon layui-icon-refresh" style="line-height: 30px"></i>
		</a>
	</div>
	<div class="layui-fluid">
		<div class="layui-row">
			<form class="layui-form" action="">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				  <legend>供应商</legend>
				</fieldset>
				<div class="layui-form-item">
					<label for="supplierId" class="layui-form-label"> <span
						class="x-red">*</span>供应商</label>
					<div class="layui-input-inline layui-show-xs-block">
						<select class="supplier-id" name="supplierId" lay-search lay-verify="not_null_supplier" lay-filter="supplier-filter">
							<option>请选择供应商</option>
						</select>
					</div>
				</div>
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				  <legend></legend>
				</fieldset>
				<div class="layui-form-item" style="margin: 30px 0 30px 100px;">
					<div class="layui-inline" style="margin-bottom: 0">
						<label for="supplierName" class="layui-form-label">供应商名称</label>
						<div class="layui-input-inline layui-show-xs-block">
							<input type="text" id="supplier-name" name="supplierName" value="-" readonly="readonly" 
							autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline" style="margin-bottom: 0">
						<label for="supplierPersonInCharge" class="layui-form-label">负责人</label>
						<div class="layui-input-inline layui-show-xs-block">
							<input type="text" id="supplier-person-in-charge" name="supplierPersonInCharge" value="-" readonly="readonly" 
							autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline" style="margin-bottom: 0">
						<label for="supplierTel" class="layui-form-label">联系电话</label>
						<div class="layui-input-inline layui-show-xs-block">
							<input type="text" id="supplier-tel" name="supplierTel" value="-" readonly="readonly" autocomplete="off" 
							class="layui-input">
						</div>
					</div>
					<div class="layui-inline" style="margin-bottom: 0">
						<label for="supplierAddress" class="layui-form-label">联系地址</label>
						<div class="layui-input-inline layui-show-xs-block">
							<input type="text" id="supplier-address" name="supplierAddress" value="-" readonly="readonly" autocomplete="off" 
							class="layui-input">
						</div>
					</div>
				</div>
			
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				  <legend>货物</legend>
				</fieldset>
				<div class="layui-form-item">
					<label for="goodId" class="layui-form-label"> <span
						class="x-red">*</span>货物名称</label>
					<div class="layui-input-inline layui-show-xs-block">
						<select class="good-id" name="goodId" lay-search lay-verify="not_null_good" lay-filter="good-filter">
							<option>请选择货物</option>
						</select>
					</div>
				</div>
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				  <legend></legend>
				</fieldset>
				<div class="layui-form-item" style="margin: 30px 0 30px 100px;">
					<div class="layui-inline" style="margin-bottom: 0">
						<label for="goodName" class="layui-form-label">货物名称</label>
						<div class="layui-input-inline layui-show-xs-block">
							<input type="text" id="good-name" name="goodName" value="-" readonly="readonly" 
							autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline" style="margin-bottom: 0">
						<label for="goodType" class="layui-form-label">货物类型</label>
						<div class="layui-input-inline layui-show-xs-block">
							<input type="text" id="good-type" name="goodType" value="-" readonly="readonly" 
							autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline" style="margin-bottom: 0">
						<label for="goodSize" class="layui-form-label">货物规格</label>
						<div class="layui-input-inline layui-show-xs-block">
							<input type="text" id="good-size" name="goodSize" value="-" readonly="readonly" autocomplete="off" 
							class="layui-input">
						</div>
					</div>
					<div class="layui-inline" style="margin-bottom: 0">
						<label for="goodPrice" class="layui-form-label">货物价值</label>
						<div class="layui-input-inline layui-show-xs-block">
							<input type="text" id="good-price" name="goodPrice" value="-" readonly="readonly" autocomplete="off" 
							class="layui-input">
						</div>
					</div>
				</div>
				
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				  <legend></legend>
				</fieldset>
				<div class="layui-form-item">
					<div class="layui-inline" style="margin-bottom: 0">
						<label for="respositoryId" class="layui-form-label"> <span
							class="x-red">*</span>仓库地址</label>
						<div class="layui-input-inline layui-show-xs-block">
							<select class="respository-id" name="respositoryId" lay-search></select>
						</div>
					</div>
					<div class="layui-inline" style="margin-bottom: 0">
						<label for="number" class="layui-form-label"> <span
							class="x-red">*</span>入库数量</label>
						<div class="layui-input-inline layui-show-xs-block">
							<input type="text" id="number" name="number" required=""
								lay-verify="required" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label"> </label>
						<button class="layui-btn" lay-filter="add" lay-submit="">
							  提交  </button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<script>
		layui.use([ 'jquery', 'form', 'layer' ], function() {
			var $ = layui.jquery;
			var form = layui.form, layer = layui.layer;
			
			//自定义验证规则
			form.verify({
				not_null_supplier : function(value) {
					if ($('.supplier-id').val() == '请选择供应商') {
						return '请选择供应商';
					}
				},
				not_null_good : function(value) {
					if ($('.good-id').val() == '请选择货物') {
						return '请选择货物';
					}
				}
			});
			
			// 初始化下拉框数据
			$.ajax({
				url: '<%=basePath%>/supplier/querySuppliersforSelect',
				dataType: 'json',
				type: 'GET',
				success: function(data) {
					$.each(data.data, function (index, item) {
						$('.supplier-id').append(new Option(item.name, item.id));// 下拉菜单里添加元素
					});
					layui.form.render("select");
				}
			});
			
			// 初始化下拉框数据
			$.ajax({
				url: '<%=basePath%>/goods/queryGoodsforSelect',
				dataType: 'json',
				type: 'GET',
				success: function(data) {
					$.each(data.data, function (index, item) {
						$('.good-id').append(new Option(item.name, item.id));// 下拉菜单里添加元素
					});
					layui.form.render("select");
				}
			});
			
			// 初始化下拉框数据
			$.ajax({
				url: '<%=basePath%>/respository/queryRespositorysforSelect',
				dataType: 'json',
				type: 'GET',
				success: function(data) {
					$.each(data.data, function (index, item) {
						$('.respository-id').append(new Option(item.address, item.id));// 下拉菜单里添加元素
					});
					layui.form.render("select");
				}
			});
			
			// 填充供应商信息
			form.on('select(supplier-filter)', function (data) {
				$.ajax({
					url: '<%=basePath%>/supplier/querySupplierById?id=' + data.value,
					dataType: 'json',
					type: 'GET',
					success: function(data) {
						$('#supplier-name').val(data.data.supplierName);
						$('#supplier-person-in-charge').val(data.data.supplierPersonInCharge);
						$('#supplier-address').val(data.data.supplierAddress);
						$('#supplier-tel').val(data.data.supplierTel);
					}
				});
            });
			
			// 填充货物信息
			form.on('select(good-filter)', function (data) {
				console.log(data);
				$.ajax({
					url: '<%=basePath%>goods/queryGoodById?id=' + data.value,
					dataType: 'json',
					type: 'GET',
					success: function(data) {
						$('#good-name').val(data.data.goodName);
						$('#good-type').val(data.data.goodType);
						$('#good-size').val(data.data.goodSize);
						$('#good-price').val(data.data.goodPrice);
					}
				});
            });
			
			
			//监听提交
			form.on('submit(add)', function(data) {
				var formData = data.field;
				var supplierId = formData.supplierId;
					goodId = formData.goodId;
					respositoryId = formData.respositoryId;
					number = formData.number;
				var par = {
						supplierId: supplierId,
						goodId: goodId,
						respositoryId: respositoryId,
						number: number
			        }
				// 点击登录按钮
				$.ajax({
					url : '<%=basePath%>record/addRecordIn',
					contentType: "application/json;charset=utf-8",
					type : 'POST',
					data : JSON.stringify(par),
					async : false,
					dataType : "json",
					success : function(data) {
						if (data.errCode == 200) {
							layer.alert("提交成功", {
								icon : 6
							}, function() {
								//关闭当前frame
								xadmin.close();
								// 可以对父窗口进行刷新 
								//xadmin.father_reload();
								location.reload();
							});
						} else {
							layer.alert(data.errMsg, {
								icon : 6
							});
						}
					},
					error : function(data) {
						layer.alert(data.errMsg, {
							icon : 6
						});
					}
				});
				return false;
			});
		});
	</script>
</body>
</html>